<template>
  <dialog-box
    :isDialog="false"
    ref="myDialog"
    :showFooter="true"
    width="600px"
    @close="close"
    @sureHandle="sureHandle"
    :isFooterSlot="true"
    :title="state.title + '查询条件'"
  >
    <template v-slot:dialogMain>
      <div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          size="default"
          status-icon
        >
          <el-form-item label="查询字段" prop="name">
            <el-select v-model="ruleForm.name">
              <el-option
                v-for="(it, i) in state.fieldList"
                :key="i"
                :label="it.label"
                :value="it.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="字段类型" prop="comp">
            <el-select v-model="ruleForm.comp">
              <el-option
                v-for="(it, i) in state.fieldTypes"
                :key="i"
                :label="it.label"
                :value="it.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="数据来源" prop="region" v-if="ruleForm.comp == 'el-select'">
            <el-select v-model="ruleForm.region">
              <el-option
                v-for="(it, i) in state.dataSource"
                :key="i"
                :label="it.label"
                :value="it.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </dialog-box>
</template>

<script setup lang="ts">
import dialogBox from "@/components/dialog-box/index.vue";
import { onMounted, computed, reactive, toRefs, ref } from "vue";
import { type ComponentSize, type FormInstance, type FormRules, ElMessage } from "element-plus";
const myDialog = ref(null);

const ruleFormRef = ref<FormInstance>();

const emit = defineEmits(['sureHandle'])

const ruleForm = ref({
  name: "",
  comp: "",
  region: "",
});

let state = reactive({
  title: "",
  fieldList: [
    { label: "周期性取数", value: 1 },
    { label: "立即取数", value: 2 },
  ],
  fieldTypes: [
    {
      value: "el-input",
      label: "文本输入框",
    },
    {
      value: "el-select",
      label: "下拉列表",
    },
    {
      value: "el-date-picker",
      label: "日期选择",
    },
  ],
  dataSource: [
    {
      value: "1",
      label: "xxx数据集",
    },
    {
      value: "2",
      label: "数据集",
    }
  ]
});
// 定义完成后，用defineExpose()暴露给父组件
const open = (title: string, data: any) => {
  resetForm();
  state.title = title;
  if(data){
    console.log(data, '111')
    ruleForm.value = Object.assign({},{...data});
  }
  myDialog.value.handleOpen();
};
const close = () => {
  myDialog.value.handleClose();
};
const sureHandle = () => {
  submitForm();
};
defineExpose({
  open,
  close,
});

const submitForm = async () => {
  if (!ruleFormRef) return;
  await ruleFormRef.value?.validate((valid, fields) => {
    if (valid) {
      console.log(Object.assign({},{...ruleForm.value}), "submit!");
      // console.log(toRefs(ruleForm), "submit!");
      ElMessage({
        type: "success",
        message: state.title + "成功!",
      });
      emit('sureHandle',Object.assign({},{...ruleForm.value}))
      close()
    }
  });
};

const resetForm = () => {
  if (!ruleFormRef) return;
  ruleFormRef.value?.resetFields();
};
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "请选择字段", trigger: "blur" },
  ],
  comp: [
    { required: true, message: "请选择类型", trigger: "blur" },
  ],
  region: [
    { required: true, message: "请选择数据来源", trigger: "blur" },
  ],
});
</script>

<style lang="scss" scoped>

</style>
